const path = require('path');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
  DefinePlugin
} = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // watch: true, //  默认是false，npm run build后，修改代码会重新打包
  entry: './src/index.js',
  devtool: 'inline-cheap-module-source-map' ,
  resolve: {
    extensions: ['.js', '.json', '.ts', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  mode: 'development',
  output: {
    filename: 'js/main.js',
    path: path.resolve(__dirname, 'dist'),
    /** 也可以配置asset模块的输出目录，但是保证每个模块使用的唯一性  **/
    // assetModuleFilename: "img/[name].[hash:4][ext]"
  },
  target: 'web',
  devServer: {
    hot: 'only', // 报错后修改对后不会刷新 保留报错信息
    open: false, // 每一次更新都会开启一个新窗口
    compress: true, // 开启http压缩
    historyApiFallback: true, // 开发阶段 路由history操作，刷新页面，会获取不到对应的路由资源。设置true可以替代为对应的html
    proxy: {
      // /api/users
      // http://localhost:4000/api/users
      // https://api.github.com/info/users
      // /api/users---> 返回
      '/api': {
        target: 'https://api.github.com',
        pathRewrite: {
          "^/api": ""
        },
        changeOrigin: true
      }
    }
  },
  module: {
    rules: [
      /** 较为冗余的写法，可以使用配置文件的方式 **/
      // {
      //   test: /\.css$/,
      //   use: [
      //     'style-loader',
      //     'css-loader',
      //     {
      //       loader: 'postcss-loader',
      //       options: {
      //         postcssOptions: {
      //           plugins: [
      //             require('autoprefixer'), // 可省略 预设简化写法
      //             require('postcss-preset-env'),
      //           ]
      //         }
      //       }
      //     }
      //   ]
      // },
      {
        test: /\.css$/,
        // 只有一个css-loader不能实现样式的展示，只能够处理css这种类型资源
        // use: ['css-loader']
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              // css文件中图片引入不需要使用.default
              // css-loader看到这个导入代码，会替换成require语法，而require返回的是esModule对象
              // css-loader设置参数esModule:false就行
              esModule: false
            }
          },

          // 对于postcss-loader使用预设（插件集合） postcss-preset-env
          // 不会因为需要兼容其他的写法，特性而又新增一个新的插件配置
          'postcss-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
          'postcss-loader'
        ]
      },
      /** 使用asset模块 **/
      // {
      //   test: /\.(png|svg|gif|jpe?g)$/,
      //   use: [{
      //     loader: 'url-loader',
      //     options: {
      //       // 配置输出图片路径和名称
      //       name: 'img/[name].[hash:6].[ext]',
      //       limit: 25 * 1024
      //       // outputPath: 'img' // 输出的目录
      //     }
      //   }]
      //   // use: [
      //   //   {
      //   //     loader: 'file-loader',
      //   //     options: {
      //   //       esModule: false // 不转为 esModule  require导入图片时不需要使用default
      //   //     }
      //   //   }
      //   // ]
      // },
      {
        test: /\.(png|svg|gif|jpe?g)$/,
        type: 'asset',
        generator: {
          // 配置输出图片路径和名称
          filename: 'img/[name].[hash:6].[ext]',
        },
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        }
      },
      {
        // 拷贝字体资源到font目录下
        test: /\.(ttf|woff2?)$/,
        type: 'asset/resource',
        generator: {
          filename: 'font/[name].[hash:3][ext]'
        }
      },
      /** 和postcss一样，可以选择采用配置选项 **/
      // 1. 不采用配置选项
      // {
      //   test: /\.js$/,
      //   use: [{
      //     loader: 'babel-loader',
      //     options: {
      //       // 配置繁琐还可以采用 preset-env插件
      //       // plugins: [
      //       //   '@babel/plugin-transform-arrow-functions',
      //       //   '@babel/plugin-transform-block-scoping'  
      //       // ]
      //       presets: ['@babel/preset-env']
      //     }
      //   }]
      // }
      // 2. 采用配置选项
      {
        test: /\.js$/,
        use: ['babel-loader']
      },
      {
        test: /\.ts$/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(), // 清除打包产物
    new HtmlWebpackPlugin({
      title: '模板文件html',
      template: './public/index.html'
    }), // 生产模板html文件
    new DefinePlugin({ // 指定全局变量，这里解决模板中使用的
      BASE_URL: '"./"',
      A: '1', // string类型？
      B: '"2"', // 希望是string类型
    }),
    new CopyWebpackPlugin({
      patterns: [{
        from: 'public',
        globOptions: {
          ignore: ['**/index.html'] // 因为已经要生成一个模板文件，所以这里忽略掉html文件
        }
      }]
    })
  ]
}